<template>
  <div class="shopping-mall">
    <loading v-if="mallList.length == 0"></loading>
    <div class="tabbar" v-if="mallList.length != 0">
      <tabs v-model="active" color="#283C79" @change="onTabChange">
        <tab :title="item.name" v-for="(item,index) in mallType" :key="index"></tab>
        <!-- <tab title="提货"></tab> -->
      </tabs>
    </div>

    <div class="mall-list">
      <div
        class="mall-item"
        v-for="(item,index) in filterList"
        :key="index"
        @click="goToShopCategory(item)"
      >
        <img :src="staticHost + item.imageUrl" alt />
        <div class="more" @click="goToShopCategory(item)">
          <p>查看更多</p>
          <icon size="14" name="arrow" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import http from "../service/myHttp.js";
import urls from "../service/url.js";
import { mapState } from "vuex";
import { staticHost } from "../service/HOST.js";
import { Tab, Tabs, Icon, Loading, Toast } from "vant";
import loading from '../components/loading.vue'

export default {
  components: {
    Tab, Tabs,
    Icon,
    loading
  },
  data() {
    return {
      active: Number(localStorage.getItem("tabbarIndex")) || "0",
      staticHost,
      mallType: [{
        id: 0,
        name: '商品直购', // 直购类
        isDirect: 'Y',
        
      },{
        id: 1,
        name: '商品进货', // 非直购类
        isDirect: 'N', 
      }],
      mallList: [],
      filterList: [],
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.login_module.userinfo,
      countAlias: "userInfo"
    })
  },
  beforeRouteLeave(to, from, next) {
    if (to.path == "/home/my") {
      localStorage.removeItem("tabbarIndex");
    }
    next()
  },
  async mounted() {
    // 自定义加载图标
    // const toast = Toast.loading({
    //   message: "加载中",
    //   forbidClick: true,
    //   // loadingType: "spinner"
    // });
    // this.active = 0

    this.filterList = []
    await this.getMallList();

    this.mallList.forEach(item=>{
      if(item.isDirect == this.mallType[this.active].isDirect){
        this.filterList.push(item)
      }
    })

    // toast.clear();
  },
  methods: {
    onTabChange(index){
      this.active = index
      localStorage.setItem("tabbarIndex", this.active);

      this.filterList = []
      this.mallList.forEach(item=>{
        if(item.isDirect == this.mallType[this.active].isDirect){
          this.filterList.push(item)
        }
      })
    },

    // 获取商城品类列表
    getMallList() {
      return http.post(urls.HQSCPL, {}).then(res => {
        this.mallList = res.data.data;
      });
    },
    // 根据品类跳转到产品列表
    goToShopCategory(item) {
      this.$router.push({
        path: "/product_browse",
        query: {
          id: item.id,
          name: item.categoryName,
          isDirect: item.isDirect
        }
      });
    }
  }
};
</script>

<style scoped>
.tabbar {
  position: sticky;
  top: 0;
}

.mall-list{
  margin-top: 5px;
}

.mall-item {
  position: relative;
  width: 100%;
  padding-top: 46%;
  margin-bottom: 6px;
}

.mall-item img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.more {
  font-weight: bold;
  display: flex;
  align-items: center;
  font-size: 1rem;
  border-radius: 20px;
  padding: 5px 10px;
  border: 1px solid #fff;
  position: absolute;
  bottom: 10%;
  left: 6%;
  color: #fff;
}
</style>